Smart Members Subscription PRO
Overview
Description
Smart Members Subscription PRO Plugin
Introducing ZealousWeb’s Smart Members Subscription PRO, the ultimate solution for managing member profiles in ExpressionEngine 7. This comprehensive plugin offers a user-friendly interface and robust functionality to streamline your membership management process.
Key Features:
- Member Profile Management: Effortlessly add, view, and modify member profiles.
- Customizable Modules: Includes Register Member, Edit Profile, Forgot Password, Reset Password, View Profile, and Delete Profile modules.
- Social Login Support: Allows members to log in using social media accounts, enhancing convenience and user experience.
- Subscription Management: Integrate front-end subscription management and configure payment gateways seamlessly.
Compatibility with Smart Member PRO: Smart Members Subscription PRO is an extended version of the Smart Member PRO add-on. It introduces subscription features while retaining all existing functionalities from Smart Member PRO. To use this add-on, ensure that Smart Member PRO is already installed, as Smart Members Subscription PRO utilizes the same database tables. Do not uninstall Smart Member PRO after installing this add-on to avoid any disruptions.
For Developers: The add-on uses ExpressionEngine hooks for seamless integration with the core files. For developers looking to customize or extend functionality, a list of hooks used by the add-on is provided to facilitate easier reference and integration with other add-ons.
Upgrade your member
Plugin's purpose and benefits
Additional Features:
- Profile Management: Add, view, and modify member profiles with ease.
- Social Login: Enable members to log in using social media accounts for a streamlined access experience.
- Subscription Integration: Manage front-end subscriptions and configure payment gateways to suit your requirements.
Get Started
Quick setup instructions
How To Use & Features
Validation Rule
These validation rules help ensure that form inputs meet specific criteria, enhancing data quality and user experience. Here’s a summary of how each rule works and when to use them:
- required: Ensures the field is not left empty.
- Example
required
- valid_email: Validates that the input is a properly formatted email address.
- Example
valid_email
- valid_emails: Checks that all emails in a comma-separated list are valid.
- Example
valid_emails
- min_length: Ensures the input is at least a specified number of characters long.
- Example
min_length[5]
- max_length: Ensures the input does not exceed a specified number of characters.
- Example
max_length[10]
- exact_length: Ensures the input is exactly a specified number of characters long.
- Example
exact_length[10]
- matches: Validates that the input matches the value of another field.
- Example
matches[password_confirmation]
- alpha: Ensures the input contains only alphabetical characters.
- Example
alpha
- alpha_numeric: Ensures the input contains only alphanumeric characters.
- Example
alpha_numeric
- alpha_dashEnsures the input contains only alphanumeric characters, underscores, or dashes.
- Example
alpha_dash
- numeric: Ensures the input contains only numeric characters.
- Example
numeric
- integer: Ensures the input is a valid integer.
- Example
integer
- decimal: Ensures the input is a valid decimal number.
- Example
decimal
- is_natural: Ensures the input is a natural number (positive integers including zero).
- Example: is_natural
- is_natural_no_zero: Ensures the input is a natural number but not zero.
- Example
is_natural_no_zero
- valid_ipEnsures the input is a valid IP address.
- Example
valid_ip
- sm_captcha_validate: Validates CAPTCHA input (used for security).
- Example
sm_captcha_validate
- is_unique: Ensures the input value is unique within a specified database table.
- Example
is_unique[members.email]
- exists_email: Checks if the email exists in a specified database table.
- Example
exists_email
- auth_password: Validates that the entered password matches the current password.
- Example
auth_password
You can use these rules to validate various types of user input, ensuring that your forms are both secure and user-friendly.
Hooks
Hooks in a plugin or system like Smart Members allow you to extend or modify functionality without changing the core code. Here’s a breakdown of the available hooks and their purposes:
Form Building Hooks
-
sm_build_form_start
Triggered at the beginning of form building. -
sm_before_logout_link
Triggered before the logout link is rendered. -
sm_build_form_end
Triggered at the end of form building.
Form Submission Hooks
-
sm_submit_form_start
Triggered at the start of form submission. -
sm_logout_start
Triggered at the start of the logout process. -
sm_submit_form_end
Triggered at the end of form submission.
Error Handling Hooks
-
sm_error_in_form
Triggered if there are errors found in the form. -
sm_outer_error
Triggered for outer-level errors.
Validation Hooks
-
sm_init_validation
Triggered to initialize validation rules.
Profile Viewing Hooks
-
sm_view_profile_start
Triggered at the start of viewing a profile. -
sm_view_profile_end
Triggered at the end of viewing a profile.
Email Hooks
-
sm_before_send_email
Triggered before sending an email.
Field Listing Hook
-
sm_total_fields
Triggered to list the total number of fields (Constructor Hook).
Social Media Login Hooks (Pro Feature)
-
sm_before_social_login
Triggered before social media login. -
sm_after_social_login
Triggered after social media login.
Import Member Hooks (Pro Feature [EE4 only])
-
sm_element_before_impor
Triggered before importing a member. -
sm_element_after_import
Triggered after importing a member.
ExpressionEngine Default Hooks
-
member_member_register_start
Triggered at the start of member registration. -
member_member_register_errors
Triggered for registration errors. -
member_member_registe
Triggered during member registration. -
member_member_logout
Triggered during member logout. -
member_delete
Triggered when a member is deleted. -
member_update_start
Triggered at the start of member update. -
member_update_end
Triggered at the end of member update. -
cp_members_validate_members
Triggered to validate members in the control panel. -
member_register_validate_members
Triggered to validate members during registration.
Usage Tips
- Customization: Use these hooks to add custom functionality or modify existing behavior without altering core code.
- Order of Execution: Be aware of the order in which hooks are triggered to ensure proper functionality.
- Documentation: Refer to the plugin’s documentation for specifics on how to use each hook effectively.
These hooks provide flexibility and control over various aspects of plugin behavior, allowing for customization and enhanced functionality.
Form Hooks
-
sm_build_form_start
Purpose: Called when a form starts building. Allows modification of data before form generation. Parameters: Source (e.g., "registration"), Total Fields (array of possible fields). Return: Modified array of fields. -
sm_build_form_end
Purpose: Called at the end of form building, before replacing data with tag data. Parameters: Source (e.g., "registration"), Variable Array (array of form parameters). Return: Modified variable array. -
sm_submit_form_start
Purpose: Called when a form is submitted, before validation. Parameters: Source (e.g., "registration"), Parameter Array (array passed in the form loop). Return: Modified parameter array. -
sm_submit_form_end
Purpose: Called when a form is submitted without errors and data is updated in the database. Parameters: Source (e.g., "registration"), Return URL. Return: Return URL. -
sm_error_in_form
Purpose: Called when errors are found in submitted form data. Parameters: Source (e.g., "registration"), Array of Errors. Return: Array of errors. -
sm_outer_error
Purpose: Called if an error occurs and {error:xyz} is missing in the form (only with error_reporting="inline"). Parameters: Source (e.g., "registration"), Array of Errors. Return: Array of errors. -
sm_init_validation
Purpose: Called before initializing the validation array to fields. Allows modification of validation rules. Parameters: Source (e.g., "registration"), Array of Validation Settings. Return: Modified array of validation settings.
Profile Hooks
-
sm_view_profile_start
Purpose: Called when triggering the {exp:smsp:profile} tag. Parameters: None. Return: None. -
sm_view_profile_end
Purpose: Called before profile data is replaced with tag data. Parameters: Array of Member Data. Return: Modified array of member data. -
sm_before_send_email
Purpose: Called before sending any email (e.g., registration, forgot password). Parameters: Source (e.g., "registration"), Array of Validation Settings. Return: Modified array of validation settings. -
sm_total_fields
Purpose: Constructor hook providing all possible fields in a form or profile. Parameter: Array of Total Fields. Return: Array of all possible fields.
Social Login Hooks
-
sm_before_social_login (Pro Feature)
Purpose: Called before social login API call. Parameter: URL for social site authentication. Return: Modified URL for social site authentication. -
sm_after_social_login (Pro Feature)
Purpose: Called after successful social login. Parameter: URL to redirect to after successful authentication. Return: Redirect URL.
Data Import Hooks
-
sm_element_before_import (Pro Feature [EE4 >= v2.0.3])
Purpose: Called just before member data is inserted or updated in the database. Parameter: Full Array of data to be inserted/updated. Return: Modified array. -
sm_element_after_import (Pro Feature [EE4 >= v2.0.3])
Purpose: Called just after member data is saved in the database. Parameters: Full Array of data saved in the database, Member ID. Return: None.
These hooks allow you to customize and extend the functionality of forms, profile views, and other actions within the Smart Members plugin, ensuring you can tailor the behavior to fit your specific needs.
Dashboard - Overview
1. Initial Setup Links
- [Link 1]: Description of the initial setup link.
- [Link 2]: Description of the initial setup link.
- [Link 3]: Description of the initial setup link.
2. Essential Links
- [Link A]: Description of the essential link.
- [Link B]: Description of the essential link.
- [Link C]: Description of the essential link.
3. Reports
Sales and Revenue
Description: Overview of total sales and revenue generated. Includes charts and graphs for detailed analysis.
Membership Stats
Description: Insights into membership numbers, growth trends, and active members.
Visits
Description: Data on website or system visits, including user activity and engagement metrics.
View and Login
Description: Statistics on user views and login activity, including peak times and user demographics.
Recent Orders
Description: List of recent orders with status updates, including order ID, customer details, and order amounts.
Orders - Overview
The Orders section provides a comprehensive list of all orders, allowing you to perform basic operations such as editing, copying, deleting, and emailing orders. You can also add new orders and export the entire orders dataset into a CSV file.
1. Orders List
Basic Operations:
- Edit: Modify the details of an existing order.
- Copy: Create a duplicate of the selected order.
- Delete: Remove the order from the list.
- Email: Send order details via email.
- Export Data: Export all orders into a CSV file.
2. Add New Order
To add a new order, click the “Add New Order” button. Fill out the following fields to complete the order setup:
- ID: The ID will be automatically generated upon saving the order.
- Code: A unique code generated randomly for the order.
- Membership Level ID: Membership level ID assigned when the membership level is created.
- Billing Details:
- Billing Name: Name of the person being billed.
- Billing Street: Street address for billing.
- Billing City: City of the billing address.
- Billing State: State of the billing address.
- Billing Postal Code: Postal code for the billing address.
- Billing Country: Country of the billing address.
- Billing Phone: Phone number associated with the billing address.
- Sub Total: Total amount before tax and discounts.
- Tax: Tax amount based on location or other factors.
- Total: Total amount calculated as Subtotal + Tax - Coupon Amount.
- Payment Type: Payment method used (e.g., PayPal Express, PayPal Standard, Credit Card).
- Card Type: Type of card used (e.g., Visa, MasterCard, AMEX).
- Account Number: Bank account number (obscure all but the last 4 digits).
- Expiration Month: Month when the card expires.
- Expiration Year: Year when the card expires.
- Status: Current status of the order (e.g., Cancelled, Error, Pending, Refunded, Review, Success, Token).
- Gateway: Payment gateway used (e.g., Stripe, PayPal, Authorize.net).
- Gateway Environment: Payment gateway environment (Testing or Sandbox).
- Payment Transaction ID: ID generated by the payment gateway for cross-referencing orders.
- Subscription Transaction ID: ID generated by the payment gateway for cross-referencing subscriptions.
- Date: Date generated by the gateway for reference.
- Notes: Additional notes or information related to the order.
- Save: Save the order after completing all required fields.
Subscribed Users - Overview
The Subscribed Users section displays all users who have purchased a subscription. You can view detailed information about each subscription by clicking the eye icon in the manage column of the table.
1. Subscribed Users List
Description: This list provides an overview of all users who have an active subscription.
Manage Column:
- Eye Icon: Click on the eye icon to view detailed information about the subscription for each user.
Subscription Settings - Overview
The Subscription Settings section allows you to customize settings for Subscription Plans, Discount Codes, Payment Gateways, Emails, and other advanced settings as per your requirements. Under this setting, you can create and manage subscriptions and discount codes.
Subscription Settings
Plan Management
View and manage all subscription plans created by the site owner. You can edit, copy, or delete existing plans.
Add New Plan
Click on the “Add New” button to create a new plan. Fill out the following details:
- Name: The name of your membership level (public).
- Description: Optional content shown on the checkout page.
- Confirmation Message: Optional content shown on the checkout confirmation page.
- Billing Details:
- Initial Payment: The amount charged at checkout (e.g., $10).
- Recurring Subscription: Check if the level has a recurring payment.
- Billing Amount: Amount billed per cycle (day(s), week(s), month(s), year(s)) after the initial payment.
- Billing Cycle: Total number of recurring billing cycles, including the trial period (if applicable). Set to zero for indefinite membership.
- Custom Trial: Check if there is a custom trial period (Optional; Trial Payment and Trial Period).
- Trial Billing Amount: Amount (can be zero for free trial) and number of cycles billed (day(s), week(s), month(s), year(s)) after the initial payment.
- Other Settings:
- Disable New Signups: Disables new signups and hides the level from the default page.
- Content Settings:
- Channels: Select the channels for which this plan has been created.
- Member Groups: Select the member groups for which this plan has been created.
- Categories: Select the categories for which this plan has been created.
- Save Plan: Click on the “Save” button to save the new plan.
Discount Codes - Overview
This section allows you to manage all discount codes created by the site owner for users. You can edit, copy, or delete existing discount codes.
Add New Discount Code
Click on the “Add New Discount Code” button to create a new discount code. Fill out the following fields:
- Code: The discount code that users will enter.
- Amount: The amount or percentage off that the discount code provides.
- Expiration Date: The date after which the discount code will no longer be valid.
- Usage Limit: The maximum number of times the discount code can be used.
- Save: Click on the “Save” button to save the new discount code.
Payment Gateway - Overview
The Payment Gateway section allows you to set up and manage various payment gateways for processing payments. You can enable, disable, and configure settings for different payment methods.
Payment Gateways List
- Gateway Name 1: Description and settings for Gateway 1.
- Gateway Name 2: Description and settings for Gateway 2.
Security - Overview
The Security section provides settings for managing security features such as two-factor authentication, password policies, and security logs.
Security Settings
- Two-Factor Authentication: Enable or disable two-factor authentication for users.
- Password Policy: Set password complexity requirements for users.
- Security Logs: View logs of security events and user activities.
Email - Overview
The Email section allows you to customize email templates and settings for notifications sent to users. You can edit, preview, and test email templates.
Email Templates
- Welcome Email: Template for the welcome email sent to new users.
- Order Confirmation: Template for confirming orders with users.
Advanced Settings - Overview
The Advanced Settings section allows for detailed configurations of system settings, including custom scripts, advanced user roles, and other advanced features.
Advanced Settings
The Advanced Settings admin page allows you to control additional customization settings for your site.
Field Description and Uses
Use reCAPTCHA?
Requiring a credit card is the best spam prevention method. However, if you offer a free membership level, you can enable reCAPTCHA to enhance spam prevention in addition to the plugin’s built-in features.
Basic Settings
The Basic Settings page allows you to customize plugin settings according to your requirements. The form is user-friendly, and the settings will affect every module used on the frontend.
1. Use Email Address as Username
This field allows you to use the same value for both the username and email fields. By selecting "Yes," the email field will no longer be required on the registration page. You will only need the username field, which will be set to accept email addresses exclusively.
Example:
<input type="email" name="username" placeholder="Email Address"> {error:username} <!-- for inline error reporting --><
Note: The input type is set to "email" while the name of the input remains "username". This behavior is consistent in the profile edit module as well.
a2. Email Template for New Registrations
You have two options for configuring email templates for registrations and forgotten passwords:
- Option 1: Use the backend setting form to define the email template.
- Option 2: Generate custom email templates from the frontend.
If you choose the frontend template option, you must select the templates from the frontend.
3. Screen Name Override
This setting allows you to use any custom field as the screen name during registration. The field chosen will replace the screen name.
Important: The screen name must be unique. If the custom field's value already exists as a screen name for another user, the default screen name will be used instead of the override.
4. Enable ReCAPTCHA?
Enabling ReCAPTCHA requires you to provide the Google ReCAPTCHA key and secret, which can be generated from the Google ReCAPTCHA site.
After generating the key and secret, you can implement ReCAPTCHA in the front-end module by passing enable_recaptcha="yes"
in the parameters and adding the following code in the template:
{if captcha}
{captcha} {error:captcha}
{if:elseif recaptcha}
{recaptcha} {error:recaptcha}
{/if}
If you enable ReCAPTCHA but do not provide the API key and secret in the backend, the standard CAPTCHA will be displayed as a fallback.
a2. Email Template for New Registrations
You have two options for configuring email templates for registrations and forgotten passwords:
- Option 1: Use the backend setting form to define the email template.
- Option 2: Generate custom email templates from the frontend.
If you choose the frontend template option, you must select the templates from the frontend.
3. Screen Name Override
This setting allows you to use any custom field as the screen name during registration. The field chosen will replace the screen name.
Important: The screen name must be unique. If the custom field's value already exists as a screen name for another user, the default screen name will be used instead of the override.
4. Enable ReCAPTCHA?
Enabling ReCAPTCHA requires you to provide the Google ReCAPTCHA key and secret, which can be generated from the Google ReCAPTCHA site.
After generating the key and secret, you can implement ReCAPTCHA in the front-end module by passing enable_recaptcha="yes"
in the parameters and adding the following code in the template:
{if captcha}
{if:elseif recaptcha}
{recaptcha} {error:recaptcha}
{/if}
If you enable ReCAPTCHA but do not provide the API key and secret in the backend, the standard CAPTCHA will be displayed as a fallback.
5. Email Template Settings
If you select the default email template option for new registrations, you will need to define the email settings at the bottom of the form. If using custom templates, only the selection of templates is required.
Email Template (View)
Configure and customize email templates for various functions within the Smart Members Subscription PRO plugin. This section allows you to view and adjust the templates used for member registration and other notifications. Ensure that your email templates are aligned with your site's branding and communication style.
Member Preferences
- EE2 Users: In ExpressionEngine 2 (EE2), member preferences settings include options for static images such as Photo files and Signature Images. Users can adjust the path, height, width, and other parameters for these fields.
- EE3 Users: The setting forms for static image preferences are not yet available in ExpressionEngine 3 (EE3). However, you can still adjust settings for photo files, avatars, and signature images from the provided module.
Social Settings
- Overview: Social Login allows users to log in using their social media accounts. This feature supports login via popular platforms such as Facebook, Twitter, Google, and 20 other social sites.
- Social Settings List Page:
Callback URL
Callback URL Configuration:
- Testing the Link: To ensure the callback URL is working correctly, click the TEST button on the right. This will verify the link's functionality.
- Success Message: If the test is successful, you will see a confirmation page indicating that the callback URL is correctly configured.
If the test fails, please check the link path to ensure it is accurate and properly configured.
Social Settings Form
Available Social Sites:
- Live
- Yahoo
- Foursquare
- GitHub
- px500
- BitBucket
- Disqus
- Dribbble
- Dropbox
- GitLab
- LastFM
- MailChimp
- Slack
- SoundCloud
- Vimeo
- Tumblr
Facebook Social Login Setup
To activate the Facebook login method in the Social Login settings, follow these steps:
- Generate Application ID and Application Secret:
- Go to the Facebook Developers Quickstart page.
- Follow the instructions to generate your Application ID and Application Secret.
- Enter Callback URL in API Form:
- You have the option to use either a Default Callback URL or a Custom Callback URL.
The Facebook API requires the exact callback URL with a specific parameter. For example, if your callback URL is http://www.example.com/?ACT=85, your Facebook callback URL should be formatted as:
ruby
Copy code
http://www.example.com/?ACT=85&hauth.done=Facebook
- Ensure the callback URL provided matches the one used in the Facebook API settings.
- Configure Facebook Settings in Smart Members Subscription PRO:
- Navigate to the Social Settings page in the Smart Members Subscription PRO plugin.
- Edit the Facebook settings section.
- Enter Your Application ID and Secret:
- Input the Application ID and Application Secret that you generated in the respective fields.
- Select the callback URL you used in the API setup.
- Save the Settings:
- Click the Save button to apply the changes.
Twitter Social Login Setup
To activate the Twitter login method in the Social Login settings, follow these steps:
- Generate Consumer Key and Consumer Secret:
- Go to the Twitter Developer Apps page.
- Follow the instructions to generate your Consumer Key and Consumer Secret.
- Enter Callback URL in API Form:
- You can use either a Default Callback URL or a Custom Callback URL based on your needs.
- Configure Twitter Settings in Smart Members Subscription PRO:
- Navigate to the Social Settings page in the Smart Members Subscription PRO plugin.
- Edit the Twitter settings section.
- Enter Your Consumer Key and Consumer Secret:
- Input the Consumer Key and Consumer Secret that you generated in the respective fields.
- Select the callback URL you used in the API setup.
- Save the Settings:
- Click the Save button to apply the changes.
Google Social Login Setup
To activate Google login method in the Social Login settings, follow these steps:
- Generate Client ID and Client Secret:
- Visit the Google Developers Console.
- Create a new project or select an existing project.
- Navigate to Credentials and generate your Client ID and Client Secret.
- Enter Callback URL in API Form:
- You can choose between a Default Callback URL or a Custom Callback URL.
The Google API requires an exact callback URL with a specific parameter. For example, if your callback URL is http://www.example.com/?ACT=85, your Google callback URL should be:
ruby
Copy code
http://www.example.com/?ACT=85&hauth.done=Google
- Configure Google Settings in Smart Members Subscription PRO:
- Go to the Social Settings page in the Smart Members Subscription PRO plugin.
- Edit the Google settings section.
- Enter Your Client ID and Client Secret:
- Input the Client ID and Client Secret that you generated in the respective fields.
- Select the callback URL you have used in the API setup.
- Save the Settings:
- Click the Save button to apply the changes.
Live Social Login Setup
To activate Live login method in the Social Login settings, follow these steps:
- Generate Client ID and Client Secret:
- Go to the Microsoft Application Registration Portal.
- Create a new application or select an existing one.
- Generate your Client ID and Client Secret.
- Enter Callback URL in API Form:
- You can use either a Default Callback URL or a Custom Callback URL based on your requirements.
- Configure Live Settings in Smart Members Subscription PRO:
- Navigate to the Social Settings page in the Smart Members Subscription PRO plugin.
- Edit the Live settings section.
- Enter Your Client ID and Client Secret:
- Input the Client ID and Client Secret that you generated in the respective fields.
- Select the callback URL you used in the API setup.
- Save the Settings:
- Click the Save button to apply the changes.
Yahoo Social Login Setup
To activate Yahoo login method in the Social Login settings, follow these steps:
- Generate Client ID and Client Secret:
- Visit the Yahoo Developer Network page.
- Create a new application or select an existing one.
- Generate your Client ID and Client Secret.
- Enter Callback URL in API Form:
- You can choose between a Default Callback URL or a Custom Callback URL based on your needs.
- Configure Yahoo Settings in Smart Members Subscription PRO:
- Go to the Social Settings page in the Smart Members Subscription PRO plugin.
- Edit the Yahoo settings section.
- Enter Your Client ID and Client Secret:
- Input the Client ID and Client Secret that you generated in the respective fields.
- Select the callback URL you used in the API setup.
- Save the Settings:
- Click the Save button to apply the changes.
Foursquare Social Login Setup
To activate Foursquare login method in the Social Login settings, follow these steps:
- Generate Client ID and Client Secret:
- Go to the Foursquare Developer Apps page.
- Create a new application or select an existing one.
- Generate your Client ID and Client Secret.
- Enter Callback URL in API Form:
- Choose between a Default Callback URL or a Custom Callback URL based on your needs.
- Configure Foursquare Settings in Smart Members Subscription PRO:
- Navigate to the Social Settings page in the Smart Members Subscription PRO plugin.
- Edit the Foursquare settings section.
- Enter Your Client ID and Client Secret:
- Input the Client ID and Client Secret that you generated in the respective fields.
- Select the callback URL you used in the API setup.
- Save the Settings:
- Click the Save button to apply the changes.
GitHub Social Login Setup
To activate GitHub login method in the Social Login settings, follow these steps:
- Generate Client ID and Client Secret:
- Visit the GitHub Developer Settings page.
- Create a new OAuth application.
- Generate your Client ID and Client Secret.
- Enter Callback URL in API Form:
- Choose either a Default Callback URL or a Custom Callback URL based on your requirements.
- Configure GitHub Settings in Smart Members Subscription PRO:
- Navigate to the Social Settings page in the Smart Members Subscription PRO plugin.
- Edit the GitHub settings section.
- Enter Your Client ID and Client Secret:
- Input the Client ID and Client Secret that you generated in the respective fields.
- Select the callback URL you used in the API setup.
- Save the Settings:
- Click the Save button to apply the changes.
500px Social Login Setup
To activate 500px login method in the Social Login settings, follow these steps:
- Generate Customer ID and Customer Secret:
- Visit the 500px Developer Applications page.
- Create a new application.
- Generate your Customer ID and Customer Secret.
- Enter Callback URL in API Form:
- You can use either a Default Callback URL or a Custom Callback URL based on your needs.
- Configure 500px Settings in Smart Members Subscription PRO:
- Go to the Social Settings page in the Smart Members Subscription PRO plugin.
- Edit the 500px settings section.
- Enter Your Customer ID and Customer Secret:
- Input the Customer ID and Customer Secret that you generated in the respective fields.
- Select the callback URL you used in the API setup.
- Save the Settings:
- Click the Save button to apply the changes.
BitBucket Social Login Setup
To activate BitBucket login method in the Social Login settings, follow these steps:
- Generate Customer Key and Customer Secret:
- Visit the BitBucket API Applications page.
- Create a new application.
- Generate your Customer Key and Customer Secret.
- Enter Callback URL in API Form:
- You can choose either a Default Callback URL or a Custom Callback URL based on your requirements.
- Configure BitBucket Settings in Smart Members Subscription PRO:
- Go to the Social Settings page in the Smart Members Subscription PRO plugin.
- Edit the BitBucket settings section.
- Enter Your Customer Key and Customer Secret:
- Input the Customer Key and Customer Secret that you generated in the respective fields.
- Select the callback URL you used in the API setup.
- Save the Settings:
- Click the Save button to apply the changes.
Disqus Social Login Setup
To activate the Disqus login method in the Social Login settings, follow these steps:
- Generate Public Key and Secret Key:
- Visit the Disqus API Applications page.
- Create a new application to obtain your Public Key and Secret Key.
- Enter Callback URL in API Form:
- You can use either a Default Callback URL or a Custom Callback URL based on your needs.
- Configure Disqus Settings in Smart Members Subscription PRO:
- Go to the Social Settings page in the Smart Members Subscription PRO plugin.
- Edit the Disqus settings section.
- Enter Your Public Key and Secret Key:
- Input the Public Key and Secret Key that you generated in the respective fields.
- Select the callback URL you used in the API setup.
- Save the Settings:
- Click the Save button to apply the changes.
Dropbox
To activate Dropbox method in Social Login settings:
- Generate App Key and App Secret:
From this link. - Enter Callback URL in API Form:
You can enter Default Callback URL or Custom Callback URL as per your need. - Configure Dropbox Settings in Smart Members Subscription PRO:
Go to the Social Settings page in Smart Members Subscription PRO and Edit Dropbox settings. - Enter Your App Key and App Secret:
Input the App Key and App Secret that you generated in the respective fields.
Select the callback URL you used in the API setup. - Save the Settings.
GitLab
To activate GitLab method in Social Login settings:
- Generate Application ID and Application Secret:
From this link. - Enter Callback URL in API Form:
You can enter Default Callback URL or Custom Callback URL as per your need. - Configure GitLab Settings in Smart Members Subscription PRO:
Go to the Social Settings page in Smart Members Subscription PRO and Edit GitLab settings. - Enter Your Application ID and Application Secret:
Input the Application ID and Application Secret that you generated in the respective fields.
Select the callback URL you used in the API setup. - Save the Settings.
To activate the Instagram method in Social Login settings:
- Generate Client ID and Client Secret:
From this link. - Enter Callback URL in API Form:
You can enter Default Callback URL or Custom Callback URL as per your need. - Configure Instagram Settings in Smart Members Subscription PRO:
Go to the Social Settings page in Smart Members Subscription PRO and Edit Instagram settings. - Enter Your Client ID and Client Secret:
Input the Client ID and Client Secret that you generated in the respective fields.
Select the callback URL you used in the API setup. - Save the Settings.
LastFM
To activate LastFM method in Social Login settings:
- Generate API Key and Shared Secret:
From this link. - Enter Callback URL in API Form:
You can enter Default Callback URL or Custom Callback URL as per your need. - Configure LastFM Settings in Smart Members Subscription PRO:
Go to the Social Settings page in Smart Members Subscription PRO and Edit LastFM settings. - Enter Your API Key and Shared Secret:
Input the API Key and Shared Secret that you generated in the respective fields.
Select the callback URL you used in the API setup. - Save the Settings.
MailChimp
To activate MailChimp method in Social Login settings:
- Generate Client ID and Client Secret:
From this link. - Enter Callback URL in API Form:
You can enter Default Callback URL or Custom Callback URL as per your need. - Configure MailChimp Settings in Smart Members Subscription PRO:
Go to the Social Settings page in Smart Members Subscription PRO and Edit MailChimp settings. - Enter Your Client ID and Client Secret:
Input the Client ID and Client Secret that you generated in the respective fields.
Select the callback URL you used in the API setup. - Save the Settings.
Slack
To activate the Slack method in Social Login settings:
- Generate Client ID and Client Secret:
From this link. - Enter Callback URL in API Form:
You can enter Default Callback URL or Custom Callback URL as per your need. - Configure Slack Settings in Smart Members Subscription PRO:
Go to the Social Settings page in Smart Members Subscription PRO and Edit Slack settings. - Enter Your Client ID and Client Secret:
Input the Client ID and Client Secret that you generated in the respective fields.
Select the callback URL you used in the API setup. - Save the Settings.
SoundCloud
To activate SoundCloud method in Social Login settings:
- Generate Client ID and Client Secret:
From this link. - Enter Callback URL in API Form:
You can enter Default Callback URL or Custom Callback URL as per your need. - Configure SoundCloud Settings in Smart Members Subscription PRO:
Go to the Social Settings page in Smart Members Subscription PRO and Edit SoundCloud settings. - Enter Your Client ID and Client Secret:
Input the Client ID and Client Secret that you generated in the respective fields.
Select the callback URL you used in the API setup. - Save the Settings.
Vimeo
To activate Vimeo method in Social Login settings:
- Generate Client ID and Client Secret:
From this link. - Enter Callback URL in API Form:
You can enter Default Callback URL or Custom Callback URL as per your need. - Configure Vimeo Settings in Smart Members Subscription PRO:
Go to the Social Settings page in Smart Members Subscription PRO and Edit Vimeo settings. - Enter Your Client ID and Client Secret:
Input the Client ID and Client Secret that you generated in the respective fields.
Select the callback URL you used in the API setup. - Save the Settings.
Tumblr
To activate Tumblr method in Social Login settings:
- Generate OAuth Consumer Key and OAuth Consumer Secret:
From this link. - Enter Callback URL in API Form:
You can enter Default Callback URL or Custom Callback URL as per your need. - Configure Tumblr Settings in Smart Members Subscription PRO:
Go to the Social Settings page in Smart Members Subscription PRO and Edit Tumblr settings. - Enter Your OAuth Consumer Key and OAuth Consumer Secret:
Input the OAuth Consumer Key and OAuth Consumer Secret that you generated in the respective fields.
Select the callback URL you used in the API setup. - Save the Settings.
Member Fields
ExpressionEngine traditionally supports limited member field types such as Text Input, Textarea, and Select Dropdown for custom member fields. To enhance functionality, new custom member fields have been introduced:
- Multi Select Box
- Radio Buttons
- Checkboxes
- File Fields
Member Fields Setting List Page: Image
Create Field Form: Image
Export Members
You can now export members with selected fields, filtered by Groups. The exports are available in both CSV and XML formats. These exports can be saved for future use and can be generated from outside the admin panel with auto-generated links.
Export Member List Page:Image
Download, Edit, or Delete Exports:
- You can download, edit, or delete exports from this page.
- External URL links for downloads will be shown as pop-ups.
- Security measures are in place for downloads:
- Private exports require login to download.
- Public exports can be downloaded by anyone logged in.
- To allow downloads without login, set “Access export URL without Login?” to YES.
Popup URL to Download Export Outside of EE: Image
Generate Export Form:
Import Members
Members can be imported with selected fields and filtration options such as same email, member ID, screen name, and unique field sanitization. Imports can be done using CSV and XML files from server paths or URLs. Imports can also be managed and used from outside the admin panel with auto-generated links.
Import Members List Page: Image
Run, Edit, or Delete Imports:
- You can run, edit, or delete imports from this page.
- External URL links for imports will be shown as pop-ups.
- Security measures are in place for imports:
- Private imports require login to run.
- Public imports can be run by anyone logged in.
- To allow imports without login, set “Access import URL without Login?” to YES.
Import Member Choose Fields: Image
Registration
The Registration module handles user registration on your site according to the settings specified in member preferences and plugin settings.
Tag for Registration Module:
html
Copy code
{exp:smsp:register}
Content data
{/exp:smsp:register}
Please refer to the provided images and links for visual reference and more detailed instructions.
Fields
- group_id
- username
- password
- password_confirm
- avatar_filename
- photo_filename
- sig_img_filename
- yahoo_im
- url
- location
- occupation
- interests
- aol_im
- msn_im
- icq
- bio
- signature
- captcha
- CUSTOM_FIELD
- CUSTOM_CHECKBOX_FIELD (Pro Feature)
- CUSTOM_RADIO_FIELD (Pro Feature)
- CUSTOM_MULTI_SELECT_FIELD (Pro Feature)
- CUSTOM_FILE_FIELD (Pro Feature)
Following Parameters can be used in Registration Form
group_id
Group id of member groups to put the member in any specific group.
Example:
group_id = “5”
allowed_groups
Allowed groups parameter is used to give options to members to select any group from them. Use input field of group_id to enter the group id from defined allowed groups.
Example:
allowed_groups = “5|6|7”
rule
Rule parameter is used to give custom rules to fields separated by pipe (|).
Example:
rule:username = “required”
rule:email = “required|valid_email|is_unique[members.email]”
attr
Parameter to add attributes in the form. We can add classes, ids, etc.
Example:
attr:id = “form_id”
attr:class = “form_class”
attr:name = “form_name”
attr:data-id = “form_data_id”
return
Return to any specific page after successful submission of the form.
Example:
return = “smart-members/profile”
error_reporting
Error reporting format is defined by this parameter. It can be either “inline” or “outline”.
Example:
error_reporting=”inline”
wrap_errors
Use this parameter to wrap form errors in any span or div if error_reporting=”inline”.
Example:
wrap_errors=”<span class=’error-inline’>|</span>”
on_submit
This parameter allows us to call any JavaScript function on form submission.
Example:
on_submit=”call_me( )”
secure_action
Secure action will post the data on a secure site (i.e., https).
Example:
secure_action=”yes”
secure_return
Secure return will return the page after form submission on a secure site (i.e., https).
Example:
secure_return=”yes”
enable_recaptcha
This parameter enables reCAPTCHA instead of the normal captcha.
- Scenario EE2:
- If this parameter is set and API key and SECRET are not passed for reCAPTCHA in the backend, the normal captcha will show.
- If reCAPTCHA API key and SECRET are passed in the backend and this parameter is not set:
- If the page is a registration page and captcha is required from member preferences, normal captcha will show.
- If the page is not a registration page, neither captcha nor reCAPTCHA will show.
- If reCAPTCHA API key and SECRET are passed in the backend and this parameter is set:
- If the page is a registration page and captcha is required from member preferences, normal captcha will not show and reCAPTCHA will override the settings.
- If the page is not a registration page, reCAPTCHA will show.
- Scenario EE3:
- Same scenario as EE2. The only change is that there is backend member preference settings in EE3 that allow not entering any captcha if the member is logged in. So if you set this parameter and API key and SECRET are also passed, if you are logged in, this reCAPTCHA or captcha will not show until you set “Require CAPTCHA while logged in?” to “Yes” from backend member settings > captcha settings.
Example:
enable_recaptcha=”yes”
Different Methods That Can Be Used by User
Input
html
Copy code
<input type="email" name="username" placeholder="Email Address">
{error:username} //if error_reporting=”inline”
Textarea
html
Copy code
<textarea name="signature"></textarea>
{error:signature} //if error_reporting=”inline”
Default File Field (Avatar, Photo, and Signature files)
html
Copy code
<input type="file" name="avatar_filename" />
{error:avatar_filename} //if error_reporting=”inline”
Select Dropdown (For Member Group)
html
Copy code
{data_group_id}
{if data_group_id:count == 1}
<select name="group_id">
<option value=""></option>
{/if}
<option value="{group_id_value}"> {group_id_label}</option>
{if data_group_id:count == data_group_id:total_results}
</select>
{error:group_id} //if error_reporting=”inline”
{/if}
{/data_group_id}
Select Dropdown (For Custom Field)
html
Copy code
{data_CUSTOM_FIELD}
{if data_CUSTOM_FIELD:count == 1}
<select name="CUSTOM_FIELD">
<option value=""></option>
{/if}
<option value="{CUSTOM_FIELD_value}"> {CUSTOM_FIELD_label}</option>
{if data_CUSTOM_FIELD:count == data_CUSTOM_FIELD:total_results}
</select>
{error:CUSTOM_FIELD} //if error_reporting=”inline”
{/if}
{/data_CUSTOM_FIELD}
Captcha
html
Copy code
{if captcha}
<p>
<label for="captcha">Please enter the word you see:</label>
{captcha}
<input type="text" name="captcha" id="captcha" />
{error:captcha}
</p>
{if:elseif recaptcha}
<p style="margin: 0;">
<label for="recaptcha">Click the checkbox</label>
{recaptcha}
{error:recaptcha}
</p>
{/if}
Accept Terms
html
Copy code
<input type="checkbox" name="accept_terms" value="y" /> Accept Terms?
{error:accept_terms} //if error_reporting=”inline”
CUSTOM_CHECKBOX_FIELD (Pro Feature)
html
Copy code
{if data_CUSTOM_CHECKBOX_FIELD:count == 1}
<p style="display: inline-flex;">
{/if}
<input type="checkbox" name="CUSTOM_CHECKBOX_FIELD[]" value="{CUSTOM_CHECKBOX_FIELD_value}" id="test_{data_CUSTOM_CHECKBOX_FIELD:count}" {if CUSTOM_CHECKBOX_FIELD_value:exists}checked{/if}>
<label for="test_{data_CUSTOM_CHECKBOX_FIELD:count}">{CUSTOM_CHECKBOX_FIELD_label}</label>
{if data_CUSTOM_CHECKBOX_FIELD:count == data_CUSTOM_CHECKBOX_FIELD:total_results}
{error:CUSTOM_CHECKBOX_FIELD}
</p>
{/if}
{/data_CUSTOM_CHECKBOX_FIELD}
CUSTOM_RADIO_FIELD (Pro Feature)
html
Copy code
{data_CUSTOM_RADIO_FIELD}
{if data_CUSTOM_RADIO_FIELD:count == 1}
<p style="display: inline-flex;">
{/if}
<input type="radio" name="CUSTOM_RADIO_FIELD" value="{CUSTOM_RADIO_FIELD_value}" id="test_{data_CUSTOM_RADIO_FIELD:count}" {if CUSTOM_RADIO_FIELD_value:exists}checked{/if}>
<label for="test_{data_CUSTOM_RADIO_FIELD:count}">{CUSTOM_RADIO_FIELD_label}</label>
{if data_CUSTOM_RADIO_FIELD:count == data_CUSTOM_RADIO_FIELD:total_results}
{error:CUSTOM_RADIO_FIELD}
</p>
{/if}
{/data_CUSTOM_RADIO_FIELD}
CUSTOM_MULTI_SELECT_FIELD (Pro Feature)
html
Copy code
{data_CUSTOM_MULTI_SELECT_FIELD}
{if data_CUSTOM_MULTI_SELECT_FIELD:count == 1}
<p style="display: inline-flex;">
<select multiple name="CUSTOM_MULTI_SELECT_FIELD[]">
{/if}
<option value="{CUSTOM_MULTI_SELECT_FIELD_value}" {if CUSTOM_MULTI_SELECT_FIELD_value:exists}selected{/if}>{CUSTOM_MULTI_SELECT_FIELD_label}</option>
{if data_CUSTOM_MULTI_SELECT_FIELD:count == data_CUSTOM_MULTI_SELECT_FIELD:total_results}
</select>
{error:CUSTOM_MULTI_SELECT_FIELD}
</p>
{/if}
{/data_CUSTOM_MULTI_SELECT_FIELD}
CUSTOM_FILE_FIELD (Pro Feature)
html
Copy code
<p>
Old file name: {CUSTOM_FILE_FIELD}<br>
<input type="file" name="CUSTOM_FILE_FIELD">
{error:CUSTOM_FILE_FIELD}
</p>
Example Registration Form
html
Copy code
{exp:smsp:register
allowed_groups="6|7|5"
rule:username="required|valid_email|min_length[5]"
rule:password="required|matches[password_confirm]|min_length[5]"
rule:password_confirm="required|min_length[5]"
rule:group_id="required"
rule:state="required"
rule:first_name="required"
attr:id="registration_id"
attr:class="registration_class"
attr:name="registration-form"
attr:data-id="registration_data_id_attr"
return="smart-members/edit-profile"
enable_recaptcha="yes"
error_reporting="inline"
wrap_errors="<span class='error-inline'>|</span>"
on_submit="registration()"
}
<p>
<input type="text" name="CUSTOM_FIELD" placeholder="CUSTOM FIELD">
{error:CUSTOM_FIELD}
</p>
{data_group_id}
{if data_group_id:count == 1}
<p>
<select name="group_id">
<option value=""></option>
{/if}
<option value="{group_id_value}">{group_id_label}</option>
{if data_group_id:count == data_group_id:total_results}
</select>
{error:group_id}
</p>
{/if}
{/data_group_id}
<p>
<label for="accept_terms">Accept Terms?</label>
<input type="checkbox" name="accept_terms" value="y" id="accept_terms">
{error:accept_terms}
</p>
<p>
<input type="file" name="avatar_filename">
{error:avatar_filename}
</p>
<p>
{captcha}
<input type="text" name="captcha" placeholder="Enter the CAPTCHA">
{error:captcha}
</p>
<p>
<button type="submit">Register</button>
</p>
{/exp:smsp:register}
Login Module Documentation
The Login module allows members to log in using additional features provided by the plugin, including inline error reporting, reCAPTCHA, and options to log in with either a username or email address.
Tag Syntax
html
Copy code
{exp:smsp:login}
<!-- Content data -->
{/exp:smsp:login}
Parameters
- allowed_groups
Specifies which member groups are available for login. You can list group IDs separated by pipes (|).
Example:
allowed_groups="5|6|7" - rule
Defines custom validation rules for fields, separated by pipes (|).
Example:
rule:username="required|min_length[5]" rule:email="required|valid_email|is_unique[members.email]" - attr
Adds HTML attributes to the form, such as classes or IDs.
Example:
attr:id="form_id" attr:class="form_class" attr:name="form_name" attr:data-id="form_data_id" - return
Redirects to a specific page after successful login.
Example:
return="smart-members/profile" - error_reporting
Sets the format for error reporting. It can be either inline or outline.
Example:
error_reporting="inline" - wrap_errors
Wraps form errors in a specified HTML element if error_reporting="inline".
Example:
wrap_errors="<span class='error-inline'>|</span>" - on_submit
Calls a JavaScript function on form submission.
Example:
on_submit="login()" - secure_action
Posts data to a secure site (https).
Example:
secure_action="yes" - secure_return
Returns the page after form submission on a secure site (https).
Example:
secure_return="yes" - enable_recaptcha
Enables reCAPTCHA instead of the normal captcha.
Example:
enable_recaptcha="yes"
Fields
- group_id
ID of the group to which the member belongs. - username
Username for login. - email
Email address for login. - password
Password for login. - auto_login
Checkbox to remember the user for auto-login. - captcha
Captcha field for security verification.
Example Login Form
html
Copy code
{exp:smsp:login
rule:username="required|min_length[5]"
rule:password="required"
allowed_groups="1|5|7"
attr:id="login_id"
attr:class="login_class"
attr:name="login-form"
attr:data-id="login_data_id_attr"
return="/smart-members/edit-profile"
error_reporting="inline"
wrap_errors="<span class='error-inline'>|</span>"
enable_recaptcha="yes"
on_submit="login()"
}
{data_group_id}
{if data_group_id:count == 1}
<p>
<select name="group_id">
<option value=""></option>
{/if}
<option value="{group_id_value}">{group_id_label}</option>
{if data_group_id:count == data_group_id:total_results}
</select>
{error:group_id}
</p>
{/if}
{/data_group_id}
<p>
<input type="text" name="username" class="text required validate[required]" placeholder="Username or Email">
{error:username}
</p>
<p>
<input type="password" name="password" class="password text required validate[required]" placeholder="Password">
{error:password}
</p>
{if captcha}
<p>
<label for="captcha">Please enter the word you see:</label>
{captcha}
<input type="text" name="captcha" id="captcha" />
{error:captcha}
</p>
{if:elseif recaptcha}
<p style="margin: 0;">
<label for="recaptcha">Click the checkbox to complete the captcha process</label>
{recaptcha}
{error:recaptcha}
</p>
{/if}
<p>
<label for="auto_login">
<input type="checkbox" name="auto_login" id="auto_login" value="y" /> Remember me?
{error:auto_login}
</label>
</p>
<div class="login-login-click cf">
<input type="submit" class="login-popup-btn login" value="Login">
</div>
{/exp:smsp:login}
Different Methods for User Input
Input
html
Copy code
<input type="text" name="username" placeholder="Email Address">
{error:username} <!-- if error_reporting="inline" -->
Select Dropdown (For Member Group)
html
Copy code
{data_group_id}
{if data_group_id:count == 1}
<select name="group_id">
<option value=""></option>
{/if}
<option value="{group_id_value}">{group_id_label}</option>
{if data_group_id:count == data_group_id:total_results}
</select>
{error:group_id} <!-- if error_reporting="inline" -->
{/if}
{/data_group_id}
Captcha
html
Copy code
{if captcha}
<p>
<label for="captcha">Please enter the word you see:</label>
{captcha}
<input type="text" name="captcha" id="captcha" />
{error:captcha}
</p>
{if:elseif recaptcha}
<p style="margin: 0;">
<label for="recaptcha">Click the checkbox to complete the captcha process</label>
{recaptcha}
{error:recaptcha}
</p>
{/if}
Auto Login
html
Copy code
<input type="checkbox" name="auto_login" value="y" /> Remember me?
{error:auto_login} <!-- if error_reporting="inline" -->
Social Login
The Social Login module allows users to log in or register on your site using their social media accounts. It supports various configurations for a seamless integration experience. Here’s a detailed breakdown of how you can use the Social Login module:
Basic Tag Structure
To use the Social Login module, you’ll use the following tag:
html
Copy code
{exp:smsp:social_login} Content data {/exp:smsp:social_login}
Parameters
- rule
- Defines custom validation rules for fields, separated by pipes (|).
- Example: rule:providers="required"
- attr
- Adds attributes like classes or IDs to the form elements.
- Example: attr:id="form_id"
- return
- Specifies the URL to redirect to after a successful login.
- Example: return="smart-members/profile"
- no_email_return
- Redirects to a specific page if the social API does not return an email address.
- Example: no_email_return="smart-members/member-form"
- error_reporting
- Sets the error reporting format (inline or outline).
- Example: error_reporting="inline"
- wrap_errors
- Wraps error messages in a specified HTML element if using inline error reporting.
- Example: wrap_errors="<span class='error-inline'>|</span>"
- on_submit
- Calls a JavaScript function on form submission.
- Example: on_submit="call_me()"
- secure_action
- Posts the data over a secure connection (https).
- Example: secure_action="yes"
- secure_return
- Returns the page over a secure connection after form submission.
- Example: secure_return="yes"
- enable_recaptcha
- Enables reCAPTCHA instead of the normal CAPTCHA.
- Example: enable_recaptcha="yes"
- popup
- Determines whether the social login request is sent via a popup or not.
- Example: popup="yes"
- remember_me
- Allows users to save their session for longer.
- Example: remember_me="yes"
- providers
- Lists the social media providers available for login.
- Example: providers="facebook|twitter|google"
Fields
- providers: The social media providers available for login.
Example Implementation
Here’s an example of how you might set up a Social Login form:
html
Copy code
{exp:smsp:social_login
providers="facebook|twitter|google"
attr:id="sl_id"
attr:class="sl_class"
attr:name="sl-form"
attr:data-id="sl_datta_id_attr"
rule:providers="required"
error_reporting="inline"
wrap_errors="<span class='error-inline'>|</span>"
on_submit="sl()"
return="smart-members/profile"
no_email_return="smart-members/edit-profile"
remember_me="yes"
secure_action="yes"
secure_return="yes"
enable_recaptcha="yes"
popup="yes"
}
{providers}
{if providers:count == 1}
<p>
<select name="providers">
<option value=""></option>
{/if}
<option value="{provider_name}">{provider_label}</option>
{if providers:count == providers:total_results}
</select>
{error:providers}
</p>
{/if}
{/providers}
<div class="login-register-click cf">
<input type="submit" class="login-popup-btn register" value="Login With Social Media">
</div>
{/exp:smsp:social_login}
Notes
- Ensure you have configured the social login providers in your backend settings.
- Adjust parameters based on your needs, such as whether to use reCAPTCHA or which providers to include.
- Customize the form’s appearance using the attr parameters for classes and IDs.
Edit Profile Form
Overview
The Edit Profile form allows members to update both static and custom profile data. Members can also modify their username, email, and password. While updating static and custom fields does not require the current password, changes to login-related fields (username, email, and password) require the current password to be entered.
Form Tag
The tag for the Edit Profile module is:
html
Copy code
{exp:smsp:edit} Content data {/exp:smsp:edit}
Parameters
- allowed_groups
Specifies which member groups are allowed to use this form.
Example: allowed_groups="5|6|7" - rule
Custom validation rules for fields, separated by a pipe (|).
Example: rule:username="required"
Example: rule:email="required|valid_email|is_unique[members.email]" - attr
Add HTML attributes to the form (e.g., classes, ids).
Example: attr:id="form_id"
Example: attr:class="form_class" - return
Redirects to a specified page after successful form submission.
Example: return="smart-members/profile" - error_reporting
Determines the format of error reporting. Options are inline or outline.
Example: error_reporting="inline" - wrap_errors
Wraps form errors in a specified HTML tag.
Example: wrap_errors="<span class='error-inline'>|</span>" - on_submit
Calls a JavaScript function upon form submission.
Example: on_submit="call_me()" - secure_action
Posts the form data over HTTPS if set to yes.
Example: secure_action="yes" - secure_return
Redirects to a secure HTTPS page after form submission if set to yes.
Example: secure_return="yes" - enable_recaptcha
Enables reCAPTCHA instead of normal captcha.
Example: enable_recaptcha="yes" - member_id
Allows editing of another member’s profile by specifying their member ID.
Example: member_id="25" - allowed_admin_groups
Restricts access to modify member data to specified admin groups.
Example: allowed_admin_groups="1|6|7"
Fields
- group_id
Member group ID. - username
Member username. - email
Member email address. - password
New password. - password_confirm
Confirm new password. - avatar_filename
Avatar file upload. - photo_filename
Profile photo upload. - sig_img_filename
Signature image file upload. - yahoo_im
Yahoo Instant Messenger handle. - url
Website URL. - location
Member’s location. - occupation
Member’s occupation. - interests
Member’s interests. - aol_im
AOL Instant Messenger handle. - msn_im
MSN Instant Messenger handle. - icq
ICQ number. - bio
Short biography. - signature
Member’s signature. - captcha
Standard CAPTCHA field. - CUSTOM_FIELD
Custom field. - CUSTOM_CHECKBOX_FIELD (Pro Feature)
Custom checkbox field. - CUSTOM_RADIO_FIELD (Pro Feature)
Custom radio field. - CUSTOM_MULTI_SELECT_FIELD (Pro Feature)
Custom multi-select field. - CUSTOM_FILE_FIELD (Pro Feature)
Custom file upload field.
Examples
Basic Form Example
html
Copy code
{exp:smsp:edit
allowed_groups="6|7|5"
rule:username="required|valid_email|min_length[5]"
rule:password="required|matches[password_confirm]|min_length[5]"
rule:password_confirm="required|min_length[5]"
rule:group_id="required"
attr:id="edit_profile_id"
attr:class="edit_profile_class"
return="smart-members/edit-profile"
enable_recaptcha="yes"
error_reporting="inline"
wrap_errors="<span class='error-inline'>|</span>"
on_submit="edit_profile()"
}
<p>
<input type="text" name="CUSTOM_FIELD" placeholder="CUSTOM FIELD">
{error:CUSTOM_FIELD}
</p>
{data_group_id}
{if data_group_id:count == 1}
<p>
<select name="group_id">
<option value=""></option>
{/if}
<option value="{group_id_value}" {if group_id_value == group_id}selected{/if}>
{group_id_label}
</option>
{if data_group_id:count == data_group_id:total_results}
</select>
{error:group_id}
</p>
{/if}
{/data_group_id}
<p>
<input type="text" name="username" value="{username}">
{error:username}
</p>
<p>
<input type="text" name="email" value="{email}">
{error:email}
</p>
<p>
<input type="password" name="current_password">
{error:current_password}
</p>
<p>
<input type="password" name="password">
{error:password}
</p>
<p>
<input type="password" name="password_confirm">
{error:password_confirm}
</p>
<p>
{if avatar_filename}
<img src="{avatar_url}{avatar_filename}" height="100" width="100">
{/if}
<input type="file" name="avatar_filename">
{error:avatar_filename}
</p>
{if captcha}
<p>
<label for="captcha">Please enter the word you see:</label>
{captcha}
<input type="text" name="captcha" id="captcha">
{error:captcha}
</p>
{if:elseif recaptcha}
<p style="margin: 0;">
<label for="recaptcha">Click the checkbox</label>
{recaptcha}
{error:recaptcha}
</p>
{/if}
<div class="edit-profile-click cf">
<input type="submit" class="edit" value="Update Profile">
</div>
{/exp:smsp:edit}
Remove Images from Edit Profile Form
Members can remove their images (Avatar, Photo, Signature) using the "Edit Profile" form. You can remove these images in two ways:
1. By Submitting the Form
To remove images, use the following submit buttons in your form:
Remove Avatar:
html
Copy code
<input type="submit" name="remove_avatar" value="Remove Avatar">
Remove Photo:
html
Copy code
<input type="submit" name="remove_photo" value="Remove Photo">
Remove Signature:
html
Copy code
<input type="submit" name="remove_sig_img" value="Remove Signature">
When the form is submitted with these buttons, the corresponding file entry will be removed. However, the image files will still exist in the image upload folder until a new image is uploaded.
2. By Using Input Fields
You can also use hidden inputs or radio buttons to remove images:
Hidden Inputs:
html
Copy code
<input type="hidden" name="remove_avatar">
<input type="hidden" name="remove_photo">
<input type="hidden" name="remove_sig_img">
Radio Buttons:
html
Copy code
<input type="radio" name="remove_avatar" value="remove"> Remove Avatar?<br>
<input type="radio" name="remove_photo" value="remove"> Remove Photo?<br>
<input type="radio" name="remove_sig_img" value="remove"> Remove Signature?<br>
Example with jQuery
Here’s how you can use jQuery to handle the removal of images:
html
Copy code
{exp:smsp:edit
return="smart-members/edit-profile"
password_required="no"
error_reporting="inline"
wrap_errors="<span class='error-inline'>|</span>"
}
<p>
{if avatar_filename}
<div>
<img src="{avatar_url}{avatar_filename}" height="100" width="100">
<a href="javascript:void(0);" class="remove_sm_pic" add_field_attr="remove_avatar">
Remove Avatar
</a><br>
</div>
{/if}
<input type="file" name="avatar_filename">
{error:avatar_filename}
</p>
<p>
{if photo_filename}
<div>
<img src="{photo_url}{photo_filename}" height="100" width="100">
<a href="javascript:void(0);" class="remove_sm_pic" add_field_attr="remove_photo">
Remove Photo
</a><br>
</div>
{/if}
<input type="file" name="photo_filename">
{error:photo_filename}
</p>
<p>
{if sig_img_filename}
<div>
<img src="{sig_img_url}{sig_img_filename}" height="100" width="100">
<a href="javascript:void(0);" class="remove_sm_pic" add_field_attr="remove_sig_img">
Remove Signature
</a><br>
</div>
{/if}
<input type="file" name="sig_img_filename">
{error:sig_img_filename}
</p>
<div class="login-edit-click cf">
<input type="submit" value="Update Account Information">
</div>
{/exp:smsp:edit}
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.remove_sm_pic', function(event) {
event.preventDefault();
var fieldAttr = $(this).attr('add_field_attr');
if (fieldAttr) {
var inputField = $(this).parent('div').find("input[name='" + fieldAttr + "']");
if (inputField.length == 0) {
$(this).parent('div').hide();
$(this).parent('div').append("<input type='hidden' name='" + fieldAttr + "'>");
}
} else {
console.log('Cannot remove');
}
});
});
</script>
View Profile Module
The View Profile module is used to display the member's data on your website. This module allows you to access and display various details of the members, except for their passwords.
Basic Usage
To use the View Profile module, the tag should be written as follows:
html
Copy code
{exp:smsp:profile}
Content data
{/exp:smsp:profile}
Parameters
Here’s a breakdown of the parameters you can use with the View Profile module:
member_id
Displays the profile of a specific member identified by the member_id.
html
Copy code
{exp:smsp:profile member_id="123"}
group_id
Shows profiles of members belonging to a specific group identified by the group_id.
html
Copy code
{exp:smsp:profile group_id="10"}
not_member_id
Excludes profiles of members with the specified member_id from the output.
html
Copy code
{exp:smsp:profile not_member_id="123"}
not_group_id
Excludes profiles of members belonging to the specified group identified by the group_id.
html
Copy code
{exp:smsp:profile not_group_id="10"}
limit
Limits the number of profiles displayed. For example, to show only 5 profiles:
html
Copy code
{exp:smsp:profile limit="5"}
order_by
Specifies the field by which to sort the profiles (e.g., by username, date_joined).
html
Copy code
{exp:smsp:profile order_by="username"}
sort
Determines the sorting order. Options are asc (ascending) or desc (descending).
html
Copy code
{exp:smsp:profile sort="desc"}
Example Usage
Here’s an example of how you might use these parameters to display profiles of members in a specific group, excluding certain members, with a limit of 10 profiles, sorted by username in ascending order:
html
Copy code
{exp:smsp:profile
group_id="10"
not_member_id="123"
limit="10"
order_by="username"
sort="asc"}
<div class="member-profile">
<h2>{username}</h2>
<p>Email: {email}</p>
<p>Joined: {date_joined}</p>
</div>
{/exp:smsp:profile}
View Profile Module with Custom Fields
The View Profile module is used to display detailed information about members. You can customize it to show various fields, including both static and custom fields. Below is a detailed guide on how to use this module, including how to list and render custom member fields.
Basic View Profile Tag
To display the profile of members, use the following tag:
html
Copy code
{exp:smsp:profile}
Content data
{/exp:smsp:profile}
Parameters
member_id: Specifies the member(s) whose profile you want to display. Use "CURRENT_MEMBER" for the logged-in user, "ALL_MEMBERS" for all members, or specify individual member IDs.
html
Copy code
member_id = ""
member_id = "CURRENT_MEMBER"
member_id = "ALL_MEMBERS"
member_id = "53"
member_id = "50|51|52|53"
group_id: Filters members by group ID. Use multiple IDs separated by | or leave it blank to include all groups except "banned", "Guests", and "Pending".
html
Copy code
group_id = "5"
group_id = "5|6|7"
not_member_id: Excludes members with the specified IDs from the output.
html
Copy code
not_member_id = "2"
not_member_id = "2|4"
not_group_id: Excludes members from the specified groups.
html
Copy code
not_group_id = "5"
not_group_id = "5|6"
limit: Limits the number of profiles displayed.
html
Copy code
limit = "50"
order_by: Specifies the field to sort the profiles by.
html
Copy code
order_by = "member_id"
order_by = "first_name"
sort: Defines the sorting order (asc or desc).
html
Copy code
sort = "asc"
sort = "desc"
Rendering Custom Member Fields
Custom member fields can be rendered using specific tags depending on their type. Here’s how to display them:
Checkboxes and Multi-select Dropdowns:
html
Copy code
{CUSTM_MEMBER_FIELD_SHORT_NAME}
{CUSTM_MEMBER_FIELD_SHORT_NAME:label} : {CUSTM_MEMBER_FIELD_SHORT_NAME:value}
{/CUSTM_MEMBER_FIELD_SHORT_NAME}
Single Value Custom Fields:
html
Copy code
{CUSTM_MEMBER_FIELD_SHORT_NAME}
OR
{CUSTM_MEMBER_FIELD_SHORT_NAME:label} : {CUSTM_MEMBER_FIELD_SHORT_NAME:value}
{/CUSTM_MEMBER_FIELD_SHORT_NAME}
Example Usage
Here’s an example of how to use the View Profile module to display all fields for members, excluding specific groups and members, and using custom fields:
html
Copy code
{exp:smsp:profile
member_id="ALL_MEMBERS"
not_group_id="1|6"
not_member_id="14|1"
}
{if no_results} <p>No data found!</p> {/if}
<p>Your details of member ID {member_id} are as follows:</p>
<p>All Fields:</p>
<ul>
{sm_list_all_fields}
<li><b>{field_label} : </b> {field_value}</li>
{/sm_list_all_fields}
</ul>
<p>Fields of Interest:</p>
<ul>
<li><b>{group_id_label} : </b> {group_id}</li>
<li><b>{username_label} : </b> {username}</li>
<li><b>{screen_name_label} : </b> {screen_name}</li>
<li><b>{email_label} : </b> {email}</li>
</ul>
{/exp:smsp:profile}
This code will:
- Fetch and display profiles of all members except those in groups with IDs 1 and 6, and members with IDs 14 and 1.
- List all available fields, including custom fields.
- Highlight specific fields of interest such as group ID, username, screen name, and email.
Example Code for Forgot Password Form
html
Copy code
{exp:smsp:forgot_password
attr:id="fp_id"
attr:class="fp_class"
attr:name="fp-form"
attr:data-id="fp_data_id_attr"
return="smart-members/send-forgmail"
error_reporting="inline"
wrap_errors="<span class='error-inline'>|</span>"
on_submit="fp()"
secure_action="yes"
secure_return="yes"
reset_password_template="smart-members/reset-password"
email:subject="Reset password request"
email:template="smart-members/forgot-password-email-template"
email:word_wrap="yes"
email:mailtype="html"
enable_recaptcha="yes"
}
<p>
<input type="email" name="email" placeholder="Email Address">
{error:email}
</p>
{if captcha}
<p>
<label for="captcha">Please enter in the word you see:</label>
{captcha}
<input type="text" name="captcha" id="captcha" />
{error:captcha}
</p>
{if:elseif recaptcha}
<p style="margin: 0;">
<label for="recaptcha">Click the checkbox</label>
{recaptcha}
{error:recaptcha}
</p>
{/if}
<p>
<input type="submit" class="forgot-pass" value="Send email">
</p>
{/exp:smsp:forgot_password}
Explanation of Parameters
- attr: Adds attributes (id, class, name, data-id) to the form element.
- return: Redirects to a specific page after successful form submission.
- error_reporting: Determines how errors are reported (inline or outline).
- wrap_errors: Wraps form errors in a specific HTML tag if error_reporting is inline.
- on_submit: Calls a JavaScript function on form submission.
- secure_action: Ensures the form action is secure (HTTPS).
- secure_return: Ensures the return URL is secure (HTTPS).
- reset_password_template: Specifies the template path for the reset password page.
- email:subject: Sets the subject of the forgot password email.
- email:template: Specifies the email template for forgot password email.
- email:word_wrap: Enables word wrapping for email content.
- email:mailtype: Sets the email format to text or HTML.
- enable_recaptcha: Enables reCAPTCHA if set, otherwise normal captcha.
Captcha and reCAPTCHA
- {captcha}: Renders a normal captcha if enable_recaptcha is not set.
- {recaptcha}: Renders reCAPTCHA if enable_recaptcha is set.
Example Code for Reset Password Form
html
Copy code
{if segment_3 != "reset-success"}
{exp:smsp:reset_password
reset_code="{segment_3}"
rule:password="required|matches[password_confirm]|min_length[5]"
rule:password_confirm="required|min_length[5]"
attr:id="rp_id"
attr:class="rp_class"
attr:name="rp-form"
attr:data-id="rp_data_id_attr"
return="smart-members/reset-password/reset-success"
enable_recaptcha="yes"
error_reporting="inline"
wrap_errors="<span class='error-inline'>|</span>"
on_submit="rp()"
}
{if no_results}
<h4>The reset token provided is invalid.</h4>
{/if}
<p>
<input type="password" name="password" placeholder="New Password">{error:password}
</p>
<p>
<input type="password" name="password_confirm" placeholder="Confirm New Password">{error:password_confirm}
</p>
{if captcha}
<p>
<label for="captcha">Please enter in the word you see:</label>
{captcha}
<input type="text" name="captcha" id="captcha" />
{error:captcha}
</p>
{if:elseif recaptcha}
<p style="margin: 0;">
<label for="recaptcha">Click the checkbox</label>
{recaptcha}
{error:recaptcha}
</p>
{/if}
<p>
<input type="submit" class="reset" value="Reset Password">
</p>
{/exp:smsp:reset_password}
{if:else}
<p>Password successfully updated. You can now <a href="/smart-members/login">login</a> with your new credentials.</p>
{/if}
Explanation of Parameters
- reset_code: This is the token used to validate the password reset request. It should be passed as a URL segment.
- rule:password: Validation rules for the new password field (e.g., required, must match confirmation, minimum length).
- rule:password_confirm: Validation rules for the password confirmation field (e.g., required, minimum length).
- attr: Adds attributes (id, class, name, data-id) to the form element.
- return: Redirects to a specific page after successful form submission.
- error_reporting: Determines how errors are reported (inline or outline).
- wrap_errors: Wraps form errors in a specific HTML tag if error_reporting is inline.
- on_submit: Calls a JavaScript function on form submission.
- secure_action: Ensures the form action is secure (HTTPS).
- secure_return: Ensures the return URL is secure (HTTPS).
- enable_recaptcha: Enables reCAPTCHA if set; otherwise, normal captcha is used.
Captcha and reCAPTCHA
- {captcha}: Renders a normal captcha if enable_recaptcha is not set.
- {recaptcha}: Renders reCAPTCHA if enable_recaptcha is set.
Notes
- Token Validation: Ensure that the token validation logic is handled correctly. If the token is invalid, show an appropriate error message.
- Security: Ensure that the form actions are secure, especially when dealing with sensitive operations like password resets.
Example Code for Delete Member Form
html
Copy code
{exp:smsp:delete
attr:id="dm_id"
attr:class="dm_class"
attr:name="dm-form"
attr:data-id="dm_data_id_attr"
return="smart-members/index"
error_reporting="inline"
wrap_errors="<span class='error-inline'>|</span>"
on_submit="dm()"
enable_recaptcha="yes"
secure_action="yes"
secure_return="yes"
}
<p>
<input type="password" name="password" placeholder="Password">
{error:password}
</p>
{if captcha}
<p>
<label for="captcha">Please enter the word you see:</label>
{captcha}
<input type="text" name="captcha" id="captcha" />
{error:captcha}
</p>
{if:elseif recaptcha}
<p style="margin: 0;">
<label for="recaptcha">Click the checkbox</label>
{recaptcha}
{error:recaptcha}
</p>
{/if}
<p>
<input type="submit" class="delete" value="Delete Account">
</p>
{/exp:smsp:delete}
Explanation of Parameters
- attr:FIELD_NAME: Adds attributes to the form element (e.g., id, class, name, data-id).
- attr:id="dm_id": Sets the ID for the form.
- attr:class="dm_class": Sets the CSS class for the form.
- attr:name="dm-form": Sets the name attribute for the form.
- attr:data-id="dm_data_id_attr": Sets a custom data attribute for the form.
- return: Defines the URL to redirect to after successful form submission.
- return="smart-members/index": Redirects to the specified page.
- error_reporting: Determines the error reporting format.
- error_reporting="inline": Displays errors inline with the form.
- wrap_errors: Wraps form errors in a specific HTML tag if error_reporting is set to inline.
- wrap_errors="<span class='error-inline'>|</span>": Wraps errors in a span with the class error-inline.
- on_submit: Calls a JavaScript function on form submission.
- on_submit="dm()": Calls the dm() function when the form is submitted.
- enable_recaptcha: Enables reCAPTCHA if set; otherwise, normal captcha is used.
- enable_recaptcha="yes": Enables reCAPTCHA for additional security.
- secure_action: Ensures that form actions are performed over HTTPS.
- secure_action="yes": Uses HTTPS for form actions.
- secure_return: Ensures that the return URL is over HTTPS.
- secure_return="yes": Uses HTTPS for the return URL.
Captcha and reCAPTCHA
- {captcha}: Displays a normal captcha if enable_recaptcha is not set.
- {recaptcha}: Displays reCAPTCHA if enable_recaptcha is set.
Notes
- Security: The form ensures secure actions and return URLs with HTTPS.
- Error Handling: Errors are displayed inline with the form, wrapped in a specified HTML element.
- Functionality: The dm() JavaScript function is called on form submission for additional processing if needed.
Logout Module
The Logout module allows users to log out of their session. It can be implemented with or without a closing tag.
With Closing Tag
html
Copy code
{exp:smsp:logout return='smart-members/index'}
<p><a href="{url}">Logout</a></p>
{/exp:smsp:logout}
- return: Redirects the user to the specified page after logging out. In this example, it redirects to smart-members/index.
- {url}: The URL for the logout action is automatically generated by the module.
Without Closing Tag
html
Copy code
<a href="{exp:smsp:logout return='smart-members/index'}">Logout</a>
- return: Redirects to smart-members/index after the logout action is performed.
Plan Module
The Plan module displays a list of plans available for logged-in members. You can customize the display by using various parameters and fields.
Example Usage
html
Copy code
{exp:smsp:plan id="5|3|2|6" name="Plan A|Plan B|Plan C"}
<h2>Plan ID: {id}</h2>
<p>Name: {name}</p>
<p>Description: {description}</p>
<p>Confirmation: {confirmation}</p>
<p>Initial Payment: {initial_payment}</p>
<p>Billing Amount: {billing_amount}</p>
<p>Cycle Number: {cycle_number}</p>
<p>Cycle Period: {cycle_period}</p>
<p>Billing Limit: {billing_limit}</p>
<p>Trial Amount: {trial_amount}</p>
<p>Trial Limit: {trial_limit}</p>
<p>Allow Signups: {allow_signups}</p>
<p>Expiration Number: {expiration_number}</p>
<p>Expiration Period: {expiration_period}</p>
<p>Recurring Subscription: {recurring_subscription}</p>
<p>Custom Trial: {custom_trial}</p>
{/exp:smsp:plan}
Parameters
- id: Displays plans with the specified IDs. Multiple IDs can be separated by a pipe (|).
- Example: id="5|3|2|6"
- name: Displays plans with the specified names. Multiple names can be separated by a pipe (|).
- Example: name="Plan A|Plan B|Plan C"
If no parameters are defined, all available plans will be shown.
Fields
- id: The ID of the plan.
- name: The name of the plan.
- description: A description of the plan.
- confirmation: Confirmation details for the plan.
- initial_payment: Initial payment required for the plan.
- billing_amount: Amount billed for the plan.
- cycle_number: Number of billing cycles.
- cycle_period: Period of each billing cycle.
- billing_limit: Billing limit of the plan.
- trial_amount: Amount for the trial period.
- trial_limit: Trial limit details.
- allow_signups: Indicates if signups are allowed.
- expiration_number: Number of expiration periods.
- expiration_period: Period of each expiration cycle.
- recurring_subscription: Details on recurring subscriptions.
- custom_trial: Custom trial details.
Notes
- For the Logout module, you can choose between a link or a button for logging out based on your design needs.
- For the Plan module, you can filter plans by ID or name to display only specific plans.
Discount Code Module
The Discount Code module allows you to show a list of discount codes and their details. You can also access related plan information using this module.
Example Usage
html
Copy code
{exp:smsp:discount_code id="5|3|2|6" code="ABCDEF|QWERTY|ZXCVBN" start_date="2021-04-08|2021-04-09" expiry_date="2021-04-08|2021-04-09"}
<h2>Discount Code ID: {id}</h2>
<p>Code: {code}</p>
<p>Start Date: {start_date}</p>
<p>Expiry Date: {expiry_date}</p>
{discount_code:plan}
<h3>Plan Details</h3>
<p>Level ID: {plan:level_id}</p>
<p>Code ID: {plan:code_id}</p>
<p>Initial Payment: {plan:initial_payment}</p>
<p>Billing Amount: {plan:billing_amount}</p>
<p>Cycle Number: {plan:cycle_number}</p>
<p>Cycle Period: {plan:cycle_period}</p>
<p>Billing Limit: {plan:billing_limit}</p>
<p>Trial Amount: {plan:trial_amount}</p>
<p>Trial Limit: {plan:trial_limit}</p>
<p>Expiration Number: {plan:expiration_number}</p>
<p>Expiration Period: {plan:expiration_period}</p>
<p>Recurring Subscription: {plan:recurring_subscription}</p>
<p>Custom Trial: {plan:custom_trial}</p>
{/discount_code:plan}
{/exp:smsp:discount_code}
Parameters
- id: Filter discount codes by their IDs. Multiple IDs can be separated by a pipe (|).
- Example: id="5|3|2|6"
- code: Filter discount codes by their code. Multiple codes can be separated by a pipe (|).
- Example: code="ABCDEF|QWERTY|ZXCVBN"
- start_date: Filter discount codes by their start date. Multiple dates can be separated by a pipe (|).
- Example: start_date="2021-04-08|2021-04-09"
- expiry_date: Filter discount codes by their expiry date. Multiple dates can be separated by a pipe (|).
- Example: expiry_date="2021-04-08|2021-04-09"
If no parameters are specified, all discount codes will be shown.
Fields
- id: The ID of the discount code.
- code: The discount code itself.
- start_date: The date when the discount code starts being valid.
- expiry_date: The date when the discount code expires.
- uses: The number of times the discount code has been used.
Plan Details
To access the plan associated with a discount code, use the nested {discount_code:plan} tag. Inside this tag, you can access various details of the plan:
- {plan:level_id}: The level ID of the plan.
- {plan:code_id}: The code ID of the plan.
- {plan:initial_payment}: The initial payment amount for the plan.
- {plan:billing_amount}: The amount billed for the plan.
- {plan:cycle_number}: The number of billing cycles.
- {plan:cycle_period}: The period of each billing cycle.
- {plan:billing_limit}: The billing limit for the plan.
- {plan:trial_amount}: The trial amount for the plan.
- {plan:trial_limit}: The trial limit for the plan.
- {plan:expiration_number}: The number of expiration periods.
- {plan:expiration_period}: The period of each expiration cycle.
- {plan:recurring_subscription}: Details on recurring subscriptions.
- {plan:custom_trial}: Custom trial details.
Order List Module
Example Usage
html
Copy code
{exp:smsp:orders id="5|3|2|6" code="VOX5R8PHQS|VOX5R8PHQT" user_id="1|2|3" membership_id="1|2" status="success|cancelled" timestamp="2021-04-08"}
<h2>Order ID: {id}</h2>
<p>Order Code: {code}</p>
<p>User ID: {user_id}</p>
<p>Membership ID: {membership_id}</p>
<p>Billing Name: {billing_name}</p>
<p>Billing Street: {billing_street}</p>
<p>Billing City: {billing_city}</p>
<p>Billing State: {billing_state}</p>
<p>Billing Zip: {billing_zip}</p>
<p>Billing Country: {billing_country}</p>
<p>Billing Phone: {billing_phone}</p>
<p>Subtotal: {subtotal}</p>
<p>Tax: {tax}</p>
<p>Coupon Amount: {couponamount}</p>
<p>Total: {total}</p>
<p>Payment Type: {payment_type}</p>
<p>Card Type: {cardtype}</p>
<p>Account Number: {accountnumber}</p>
<p>Expiration Month: {expirationmonth}</p>
<p>Expiration Year: {expirationyear}</p>
<p>Status: {status}</p>
<p>Gateway: {gateway}</p>
<p>Gateway Environment: {gateway_environment}</p>
<p>Payment Transaction ID: {payment_transaction_id}</p>
<p>Subscription Transaction ID: {subscription_transaction_id}</p>
<p>Timestamp: {timestamp}</p>
<p>Affiliate ID: {affiliate_id}</p>
<p>Affiliate SubID: {affiliate_subid}</p>
<p>Notes: {notes}</p>
{orders:plan}
<h3>Plan Details</h3>
<p>Plan ID: {plan:id}</p>
<p>Name: {plan:name}</p>
<p>Description: {plan:description}</p>
<p>Confirmation: {plan:confirmation}</p>
<p>Initial Payment: {plan:initial_payment}</p>
<p>Billing Amount: {plan:billing_amount}</p>
<p>Cycle Number: {plan:cycle_number}</p>
<p>Cycle Period: {plan:cycle_period}</p>
<p>Billing Limit: {plan:billing_limit}</p>
<p>Trial Amount: {plan:trial_amount}</p>
<p>Trial Limit: {plan:trial_limit}</p>
<p>Allow Signups: {plan:allow_signups}</p>
<p>Expiration Number: {plan:expiration_number}</p>
<p>Expiration Period: {plan:expiration_period}</p>
<p>Recurring Subscription: {plan:recurring_subscription}</p>
<p>Custom Trial: {plan:custom_trial}</p>
{/orders:plan}
{orders:discount_code_uses}
<h3>Discount Code Details</h3>
<p>Discount Code ID: {discount_code_uses:id}</p>
<p>Code ID: {discount_code_uses:code_id}</p>
<p>Code: {discount_code_uses:code}</p>
<p>User ID: {discount_code_uses:user_id}</p>
<p>Order ID: {discount_code_uses:order_id}</p>
{/orders:discount_code_uses}
{/exp:smsp:orders}
Parameters
- id: Filter orders by their ID. Multiple IDs can be separated by a pipe (|).
- Example: id="5|3|2|6"
- code: Filter orders by their reference code. Multiple codes can be separated by a pipe (|).
- Example: code="VOX5R8PHQS|VOX5R8PHQT"
- user_id: Filter orders by the member ID who placed the order. Multiple IDs can be separated by a pipe (|).
- Example: user_id="1|2|3"
- membership_id: Filter orders by the subscribed plan ID. Multiple IDs can be separated by a pipe (|).
- Example: membership_id="1|2"
- status: Filter orders by their status. Multiple statuses can be separated by a pipe (|).
- Example: status="success|cancelled"
- timestamp: Filter orders by the date and time they were placed.
- Example: timestamp="2021-04-08"
If no parameters are specified, all orders for the logged-in member will be shown.
Fields
- id: The ID of the order.
- code: The reference code of the order.
- user_id: The ID of the member who placed the order.
- membership_id: The ID of the subscribed plan.
- billing_name: The name on the billing information.
- billing_street: The street address on the billing information.
- billing_city: The city on the billing information.
- billing_state: The state on the billing information.
- billing_zip: The zip code on the billing information.
- billing_country: The country on the billing information.
- billing_phone: The phone number on the billing information.
- subtotal: The subtotal amount of the order.
- tax: The tax amount of the order.
- couponamount: The amount discounted by any coupon.
- total: The total amount of the order.
- payment_type: The type of payment used.
- cardtype: The type of card used for the payment.
- accountnumber: The account number used for the payment.
- expirationmonth: The expiration month of the payment method.
- expirationyear: The expiration year of the payment method.
- status: The status of the order.
- gateway: The payment gateway used.
- gateway_environment: The environment of the payment gateway (e.g., live or test).
- payment_transaction_id: The ID of the payment transaction.
- subscription_transaction_id: The ID of the subscription transaction.
- timestamp: The date and time when the order was placed.
- affiliate_id: The ID of the affiliate associated with the order.
- affiliate_subid: The sub-ID of the affiliate associated with the order.
- notes: Any additional notes related to the order.
Get subscribed plan ID
Display All Subscribed Plan IDs
To display all the subscribed plan IDs for a logged-in member, use the following tag:
html
Copy code
{exp:smsp:get_subscribed_planid}
This will output a comma-separated list of plan IDs, such as:
Copy code
1,2,3,5,8
Check If a Specific Plan Is Subscribed
To check if a particular plan ID is among the subscribed plans, you can use the following conditional logic. For instance, if you want to check if plan ID 3 is subscribed, you can do it like this:
html
Copy code
{if "{exp:smsp:get_subscribed_planid}" ~ '/\b3\b/'}
Selected
{if:else}
Not selected
{/if}
Explanation:
- {exp:smsp:get_subscribed_planid}: Retrieves a comma-separated list of subscribed plan IDs for the logged-in member.
- ~ '/\b3\b/': Checks if the plan ID 3 is present in the list. The \b ensures that it matches whole words only, so it won't incorrectly match parts of other numbers.
Cancel Order
To cancel an order, use the paypal_cancel tag. Here’s how you can use it:
Example Usage
html
Copy code
{exp:smsp:paypal_cancel order_id='{segment_2}'}
- order_id: Replace {segment_2} with the dynamic value representing the order ID you wish to cancel.
Checkout Form
The checkout form tag allows users to checkout for a subscription plan. You can customize this tag with various parameters and fields to suit your needs.
Example Usage
html
Copy code
{exp:smsp:form plan_id='{segment_3}' prefix='smsp' return='smsp/confirmation' payment_confirmation='smsp/ppexpressconfirmation' cancel='smsp/cancel'}
{smsp:plan:name}
{smsp:plan:description}
{smsp:plan:initial_payment}
{smsp:plan:billing_amount}
{smsp:plan:cycle_period}
{smsp:plan:cycle_number}
{smsp:plan:billing_limit}
{smsp:plan:trial_limit}
{smsp:plan:trial_amount}
{/exp:smsp:form}
Parameters
- plan_id: Specifies the ID of the plan the user is subscribing to. For example, plan_id='{segment_3}' where {segment_3} can be replaced with the dynamic plan ID.
- prefix: Allows you to set a custom prefix for plan fields. The default is smsp.
- return: URL to redirect to after a successful checkout. For example, return='smsp/confirmation'.
- payment_confirmation: URL to redirect to after payment confirmation. For example, payment_confirmation='smsp/ppexpressconfirmation'.
- cancel: URL to redirect to if the checkout is canceled. For example, cancel='smsp/cancel'.
Plan Fields
When using a prefix, you can access the following plan fields:
- {smsp:plan:name}: Plan name
- {smsp:plan:description}: Plan description
- {smsp:plan:initial_payment}: Initial payment amount
- {smsp:plan:billing_amount}: Billing amount
- {smsp:plan:cycle_period}: Billing cycle period
- {smsp:plan:cycle_number}: Billing cycle number
- {smsp:plan:billing_limit}: Billing limit
- {smsp:plan:trial_amount}: Trial amount
- {smsp:plan:trial_limit}: Trial limit
Checkout Form
The smsp:form tag facilitates the checkout process for a subscription plan. It allows you to display a form where users can select a plan and proceed with the payment.
Basic Structure
html
Copy code
{exp:smsp:form plan_id='{segment_3}' prefix='smsp' return='smsp/confirmation' payment_confirmation='smsp/ppexpressconfirmation' cancel='smsp/cancel'}
{smsp:plan:name}
{smsp:plan:description}
{smsp:plan:initial_payment}
{smsp:plan:billing_amount}
{smsp:plan:cycle_period}
{smsp:plan:cycle_number}
{smsp:plan:billing_limit}
{smsp:plan:trial_amount}
{smsp:plan:trial_limit}
{/exp:smsp:form}
Parameters
- plan_id: Specifies the ID of the subscription plan that the user will be checking out for. For example, plan_id='{segment_3}' where {segment_3} should be replaced with the dynamic value of the plan ID.
- prefix: Defines a custom prefix for the plan fields. If not specified, the default prefix is smsp. For example, prefix='smsp'.
- return: URL to redirect the user to after a successful checkout. For example, return='smsp/confirmation'.
- payment_confirmation: URL to redirect the user to after the payment has been confirmed. For example, payment_confirmation='smsp/ppexpressconfirmation'.
- cancel: URL to redirect the user to if the checkout process is canceled. For example, cancel='smsp/cancel'.
Plan Fields
With the specified prefix, you can access the following plan fields:
- {smsp:plan:name}: The name of the plan.
- {smsp:plan:description}: The description of the plan.
- {smsp:plan:initial_payment}: The initial payment required for the plan.
- {smsp:plan:billing_amount}: The amount to be billed regularly for the plan.
- {smsp:plan:cycle_period}: The billing cycle period (e.g., monthly, yearly).
- {smsp:plan:cycle_number}: The number of cycles for the plan.
- {smsp:plan:billing_limit}: The limit on billing (if any).
- {smsp:plan:trial_amount}: The trial amount for the plan.
- {smsp:plan:trial_limit}: The limit for the trial period.
Example
Here is a practical example showing how you might use the smsp:form tag on a page:
html
Copy code
{exp:smsp:form plan_id='{segment_3}' prefix='smsp' return='smsp/confirmation' payment_confirmation='smsp/ppexpressconfirmation' cancel='smsp/cancel'}
<h1>{smsp:plan:name}</h1>
<p>{smsp:plan:description}</p>
<p>Initial Payment: {smsp:plan:initial_payment}</p>
<p>Billing Amount: {smsp:plan:billing_amount}</p>
<p>Billing Cycle: {smsp:plan:cycle_period} for {smsp:plan:cycle_number} cycles</p>
<p>Billing Limit: {smsp:plan:billing_limit}</p>
<p>Trial Amount: {smsp:plan:trial_amount}</p>
<p>Trial Limit: {smsp:plan:trial_limit}</p>
<button type="submit">Subscribe Now</button>
{/exp:smsp:form}
Form Fields
Here's an example of how to create a checkout form using the smsp:form tag with various form fields:
Form Structure
html
Copy code
{exp:smsp:form plan_id='{segment_3}' prefix='smsp' return='smsp/confirmation' payment_confirmation='smsp/ppexpressconfirmation' cancel='smsp/cancel'}
<font color="red">{smsp:checkout:error}</font>
Apply Discount:
<input type='text' name='discount_code' value='{smsp:form:discount_code}' />
First Name:
<input type='text' name='first_name' value='{smsp:form:first_name}' required='true' />
Last Name:
<input type='text' name='last_name' value='{smsp:form:last_name}' />
Email:
<input type='email' name='email' value='{smsp:form:email}' required='true' />
Address 1:
<input type='text' name='address1' value='{smsp:form:address1}' required='true' />
Address 2:
<input type='text' name='address2' value='{smsp:form:address2}' />
City:
<input type='text' name='city' value='{smsp:form:city}' required='true' />
State:
<input type='text' name='state' value='{smsp:form:state}' required='true' />
Postal Code:
<input type='text' name='postal_code' value='{smsp:form:postal_code}' required='true' />
Phone:
<input type='text' name='phone' value='{smsp:form:phone}' required='true' />
Country:
<select name='country' value='{smsp:form:country}' required='true'>
<option value='GB' data-countryISDCode='44'>UK (+44)</option>
<option value='US' data-countryISDCode='1' selected='true'>USA (+1)</option>
<option value='IN' data-countryISDCode='91'>India (+91)</option>
</select>
Card Number:
<input type='text' name='card_number' />
Expiry Month:
<select name='expiry_month' value='{smsp:form:expiry_month}'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
Expiry Year:
<select name='expiry_year' value='{smsp:form:expiry_year}'>
<option>2021</option>
<option>2022</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
</select>
CVC:
<input type='text' name='cvc' value='132' />
Captcha: {smsp:form:captcha}
<input type='submit' class='register' value='Register' />
{/exp:smsp:form}
Explanation of Fields
- Discount Code: {smsp:form:discount_code}
- First Name: {smsp:form:first_name}
- Last Name: {smsp:form:last_name}
- Email: {smsp:form:email}
- Address 1: {smsp:form:address1}
- Address 2: {smsp:form:address2}
- City: {smsp:form:city}
- State: {smsp:form:state}
- Postal Code: {smsp:form:postal_code}
- Phone: {smsp:form:phone}
- Country: {smsp:form:country}
- Card Number: {smsp:form:card_number}
- Expiry Month: {smsp:form:expiry_month}
- Expiry Year: {smsp:form:expiry_year}
- CVC: {smsp:form:cvc}
- Captcha: {smsp:form:captcha}
- Error Message: {smsp:checkout:error}
Show entries for the subscribed plan
- Retrieve Subscribed Plan Entries: Use the {exp:smsp:get_entries} tag to get the entry IDs for the subscribed plan.
- Display Entries: Use the {exp:channel:entries} tag to show the entries. You'll need to parse the entries based on the IDs returned by {exp:smsp:get_entries}.
Example Code
html
Copy code
{exp:smsp:get_entries}
{exp:channel:entries entry_id="{entry_id}" parse="inward"}
<h2>{title}</h2>
<p>{content}</p>
{/exp:channel:entries}
{/exp:smsp:get_entries}
Explanation
- {exp:smsp:get_entries}: This tag retrieves the entry IDs associated with the subscribed plans for the logged-in user.
- {exp:channel:entries entry_id="{entry_id}" parse="inward"}: This tag uses the entry IDs from the previous tag to fetch and display the corresponding entries from the specified channel. Adjust {entry_id} to the actual field or tag returning the entry IDs.
Considerations
- Permissions: Ensure that the channels, member groups, and categories are correctly set up during plan creation to match the entries you want to display.
- Error Handling: Implement error handling or fallback content if no entries are returned or if the user is not subscribed to any plans.
Switch plan
To enable users to switch plans with a single click, you can use the {exp:smsp:form} tag with specific parameters to handle the process of canceling the current plan and subscribing to a new one. Below is a detailed explanation and example of how to set this up:
Parameters for Switching Plan
- plan_id: The ID of the new plan to which the user wants to switch.
- previous_plan: The ID of the current plan that the user is canceling.
- upgrade_plan: Set to "yes" to indicate that this is a plan switch.
- prefix: The prefix for form fields.
- return: The URL to redirect to after a successful switch.
- payment_confirmation: The URL to redirect to for payment confirmation.
- cancel: The URL to redirect to if the user cancels the operation.
Example Code
html
Copy code
{exp:smsp:form
plan_id='{segment_3}'
previous_plan='{segment_4}'
upgrade_plan="yes"
prefix='smsp'
return="smsp/confirmation"
payment_confirmation="smsp/ppexpressconfirmation"
cancel="smsp/cancel"
}
<font color="red">{smsp:checkout:error}</font>
Apply Discount: <input type='text' name="discount_code" value="{smsp:form:discount_code}" />
First Name: <input type='text' name="first_name" value="{smsp:form:first_name}" required="true" />
Last Name: <input type='text' name="last_name" value="{smsp:form:last_name}" />
Email: <input type='text' name="email" value="{smsp:form:email}" required="true" />
Address1: <input type='text' name="address1" value="{smsp:form:address1}" required="true" />
Address2: <input type='text' name="address2" value="{smsp:form:address2}" />
City: <input type='text' name="city" value="{smsp:form:city}" required="true" />
State: <input type='text' name="state" value="{smsp:form:state}" required="true" />
Postal Code: <input type='text' name="postal_code" value="{smsp:form:postal_code}" required="true" />
Phone: <input type='text' name="phone" value="{smsp:form:phone}" required="true" />
Country:
<select name="country" value="{smsp:form:country}" required="true">
<option value="GB" data-countryISDCode="44">UK (+44)</option>
<option value="US" data-countryISDCode="1" selected="true">USA (+1)</option>
<option value="IN" data-countryISDCode="91">India (+91)</option>
</select>
Card Number: <input type='text' name="card_number" />
Expiry Month:
<select name="expiry_month" value="{smsp:form:expiry_month}">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
Expiry Year:
<select name="expiry_year" value="{smsp:form:expiry_year}">
<option>2021</option>
<option>2022</option>
<option selected="">2023</option>
<option>2024</option>
</select>
CVC: <input type='text' name="cvc" value="132" />
Captcha: {smsp:form:captcha}
<input type="submit" class="register" value="Switch Plan">
{/exp:smsp:form}
Explanation
- {segment_3}: Represents the new plan ID. You should replace this with the actual method of retrieving the new plan ID (e.g., from a URL segment or another source).
- {segment_4}: Represents the current plan ID that is being canceled.
- upgrade_plan="yes": This parameter is mandatory for switching plans and indicates that the form is being used for an upgrade.
- prefix='smsp': Defines the prefix for form fields. Adjust this as needed.
- return, payment_confirmation, and cancel: Define the URLs to handle redirection based on the outcome of the form submission.
Get Support
FAQs
Change log
version 1.0.3
- Social login changes with new API
version 1.0.2
- Update add-on with support Expression Engine 7
version 1.0.1
- Update add-on with minor bug Fixes
version 1.0.0
- Initial Version